<template>
  <div class="mainPage" style="padding-top: 40rpx">
    <div class="top-box">
      <div class="home-card">
        <div class="card-header">
          <div class="nickname">{{ userInfo.nickname }}</div>
          <div style="display: flex;align-items: center">
            <span style="padding-right: 20rpx">接单状态</span>
            <u-switch v-model="userInfo.is_online" :active-value="1" :inactive-value="0" active-color="#ff6600" @change="changeStatus"></u-switch>
          </div>
        </div>
        <div class="card-body">
          <div class="card-item">
            <div class="item-money">{{ userInfo.todayOrderCount }}</div>
            <div class="item-title">今日接单</div>
          </div>
          <div class="card-item">
            <div class="item-money" style="color: rgb(255, 170, 127)">{{ userInfo.todayWaitService }}</div>
            <div class="item-title">待服务</div>
          </div>
        </div>
        <div class="card-body">
          <div class="card-item">
            <div class="item-money" style="color: red">{{ userInfo.todayRefund }}</div>
            <div class="item-title">退款中</div>
          </div>
          <div class="card-item">
            <div class="item-money" style="color: rgb(85, 170, 255)">{{ userInfo.todayFinish }}</div>
            <div class="item-title">已完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="top-box">
      <div class="home-card">
        <div class="card-body">
          <div class="card-item" @click="sos">
            <div class="item-money">
              <image style="width: 70rpx;height: 70rpx" src="/static/SOS.png"></image>
            </div>
            <div class="item-title">一键报警</div>
          </div>
          <div class="card-item" @click="location">
            <div class="item-money">
              <image style="width: 70rpx;height: 70rpx" src="/static/location.png"></image>
            </div>
            <div class="item-title" style="font-size: 22rpx">
              {{ userInfo.address || '上传定位' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="font-size: 18px;font-weight: bold;color: #333333;padding: 20rpx">
        今日服务中订单
      </div>
      <view class="padding list">
        <view class="item bg-white radius-lg padding-sm margin-bottom" v-for="(item,index) in list" :key="index">
          <view class="top">
            <view>
              <text class="text-sm">订单编号：{{item.order_no}}</text>
            </view>
            <view class="text-sm">
              <text class="text-right" :class="'text-'+item.statusText.color">{{item.statusText.value  }}</text>
            </view>
          </view>
          <view class="project padding-tb-sm" v-for="(items,indexs) in item.orderDetails" :key="indexs">
            <image :src="items.good.image" mode="aspectFill" class="image"></image>
            <view class="proBox padding-left-sm">
              <view class="nameandtime">
                <view class="name text-bold text-black">{{items.good.name}}</view>
                <view class="time text-gray text-sm">{{items.good.duration}}分钟</view>
              </view>
              <view class="desc text-sm text-gray margin-bottom-sm">
                {{items.good.desc || ''}}
              </view>
              <view class="cost">
                <view class="text-red text-bold">￥{{items.staff_price}}</view>
                <view class="num text-gray">x{{items.count}}</view>
              </view>
            </view>
          </view>

          <view class="orderinfo padding-xs text-sm">
            <view class="crow margin-bottom-sm">
              <view class="name">下单时间</view>
              <view class="content">
                <text>{{item.create_time}}</text>
              </view>
            </view>
            <view class="crow margin-bottom-sm">
              <view class="name">服务客服</view>
              <view class="content">
                <view class="cu-avatar sm round margin-left" :style="{backgroundImage: 'url('+item.staff.avatar+')'}"></view>
                <text class="padding-left-xs">{{item.staff.nickname}}</text>
              </view>
            </view>
            <view class="crow margin-bottom-sm">
              <view class="name">预约时间</view>
              <view class="content">
                <text>{{item.start_time}}</text>
              </view>
            </view>
            <view class="crow margin-bottom-sm">
              <view class="name">客户备注</view>
              <view class="content">
                <text>{{item.remark}}</text>
              </view>
            </view>
            <view class="crow padding-bottom-sm">
              <view class="name">
                <text>车费：</text>
              </view>
              <div class="content">
                <text class="text-red text-bold">¥ {{item.travel_mode_fee}}</text>
              </div>
            </view>
                      <view class="crow padding-bottom-sm solid-bottom">
                        <view class="name">
                          <text>到手金额：</text>
                        </view>
                        <div class="content">
                          <text class="text-red text-bold">¥ {{ getAmount(item)}}</text>
                        </div>
                      </view>
            <view class="crow padding-top-sm">
              <view class="name"></view>
              <view class="content">
                <button class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click="toUrl('/pages/order/detail?orderId='+item.id)">订单详情</button>
                <button v-if="item.buttonShow.waitServe" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toget(item,3)">开始服务</button>
                <button v-if="item.buttonShow.finish" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toget(item,4)">已完成</button>
              </view>
            </view>
          </view>
        </view>
        <u-empty mode="order" v-if="list.length === 0"></u-empty>
      </view>

    </div>
    <Loading v-if="pageLoading"/>

  </div>
</template>
<script>
export default {
  data() {
    return {
      pageLoading: false,
      userInfo: {
        is_online: 0,
        todayRefund: 0
      },
      orderNum: 0,
      waitNum: 0,
      finishNum: 0,
      list: [],
      locationTask: null
    };
  },
  onShow() {
    this.getMyInfo();
    this.getOrderList()
    // this.location()
    // clearInterval(this.locationTask)
    // this.locationTask = setInterval(() => {
    //   if (this.userInfo.is_online === 1) {
    //     this.location()
    //   }
    // },60 * 1000)
  },
  methods: {
    getPrice(price) {
      let settlement_ratio = this.userInfo.settlement_ratio || 100
      let _settlement_ratio = settlement_ratio / 100
      return (price * _settlement_ratio).toFixed(2)
    },
    sos() {
      uni.makePhoneCall({
        phoneNumber: '110'
      });
    },
    location() {
      let that =this
      console.log(that.userInfo)
      uni.chooseLocation({
        latitude: that.userInfo.latitude,
        longitude: that.userInfo.longitude,
        success: res => {
          console.log(res)
          if (res.errMsg === 'chooseLocation:ok') {
            if (!res.address) {
              uni.showToast({
                title: '请选择正常地址',
                icon: 'none'
              })
              return;
            }
            that.$http.updateStaff({
              id: that.userInfo.id,
              address: res.address,
              address_name: res.name,
              longitude: res.longitude,
              latitude: res.latitude
            }).then(res => {
              console.log(res)
            })
          } else {
            uni.showToast({
              title: '获取位置失败',
              icon: 'none'
            })
          }
        },
        fail: err => {
          console.log(err);
        },
        complete: (err) => {
          console.log(err);
        }
      });

    },
    getMyInfo() {
      if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').id) {
        console.log('-----')
        this.userInfo = uni.getStorageSync('userInfo')
        this.$http.getTechnicianDetail({
          id: uni.getStorageSync('userInfo').id
        }).then(res => {
          uni.setStorageSync('userInfo', res);
          this.userInfo = res;
        }).catch(err => {
          uni.redirectTo({
            url: '/pages/login/login'
          })
        })
      }
    },
    getOrderList() {
      this.pageLoading = true;
      this.$http.getOrderList({
        status: 'serve',
        staff_id: uni.getStorageSync('userInfo').id,
      }).then(res => {
        this.pageLoading = false;
        this.list = res.map(item => {
          item.buttonShow = {
            // 接单
            get: false,
            // 到达
            arrive: false,
            // 带开始服务
            waitServe: false,
            // 完成
            finish: false,
          }
          // 设置状态
          if (item.pay_status === 1) {
            if (item.order_status === 0) {
              item.statusText = {
                color: 'orange',
                value: '待接单',
              }
              item.buttonShow.get = true
            }
            else if (item.order_status === 1) {
              item.statusText = {
                color: 'orange',
                value: '已接单',
              }
              item.buttonShow.arrive = true
            }
            else if (item.order_status === 2) {
              item.statusText = {
                color: 'orange',
                value: '已接单',
              }
              item.buttonShow.waitServe = true
            }
            else if (item.order_status === 3) {
              item.statusText = {
                color: 'orange',
                value: '服务中',
              }
              item.buttonShow.finish = true
            }
            else if (item.order_status === 4) {
              item.statusText = {
                color: 'green',
                value: '已完成',
              }
            }
          }
          else if (item.pay_status === 2) {
            item.statusText = {
              color: 'orange',
              value: '退款中',
            }
          } else if (item.pay_status === 3) {
            item.statusText = {
              color: 'orange',
              value: '退款中',
            }
          } else if (item.pay_status === 4) {
            item.statusText = {
              color: 'green',
              value: '退款成功',
            }
          } else if (item.pay_status === 5) {
            item.statusText = {
              color: 'green',
              value: '取消退款',
            }
            item.buttonShow.refund = true
          }
          return {
            ...item,
          }
        });
        uni.stopPullDownRefresh();
      })
    },

    getAmount(item) {
      return (parseFloat(item.staff_amount) + parseFloat(item.travel_mode_fee)).toFixed(2)
    },
    changeStatus(e){
      uni.showLoading({
        title: '加载中'
      });
      this.$http.updateTechnician({
        id: uni.getStorageSync('userInfo').id,
        is_online: e
      }).then(res=>{
        uni.hideLoading()
        uni.showToast({
          title: '修改成功',
          icon: 'success',
          duration: 2000
        })
        this.userInfo.is_online = e
      })
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getOrderList();
  },
}
</script>
<style lang="scss">
.top-box {
  padding: 20rpx;
  .home-card {
    border-radius: 14rpx;
    background: #ffffff;
    padding: 20px;
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
      .nickname {
        font-size: 32rpx;
        color: #333333;
      }
    }
    .card-body {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .card-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .item-money {
          font-size: 48rpx;
          color: #333333;
          margin-bottom: 20rpx;
          text-align: center;
          font-weight: bold;
        }
        .item-title {
          font-size: 32rpx;
          color: #666666;
          text-align: center;
        }
      }
    }
  }
}

.item{
  .top{
    display: flex;
    justify-content: space-between;
  }
  .project{
    display: flex;
    .image{
      width: 130upx;
      height: 130upx;
      border-radius: 20upx;
    }
    .proBox{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .nameandtime,.cost{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.orderinfo{
  .crow{
    justify-content:space-between
  }
}
</style>
